<template>
  <div>
    <main>
      <div class="h180">
        <div class="imgshow"><img v-lazy="regcourseitem.image" alt="" /></div>
        <div class="info">
          <div class="title">{{ regcourseitem.title }}</div>
          <div class="time">
            <i class="iconfont icon-040shizhong"></i>
            到期时间：<span>{{ regcourseitem.endDate.substring(0, 10) }}</span>
            | <span class="num">{{ regcourseitem.num }}</span> 人已看
          </div>
          <div class="teachername">
            <div class="avatar">
              <img v-lazy="regcourseitem.teacherImg" alt="" />
            </div>
            <div class="nm">{{ regcourseitem.teacherName }}</div>
          </div>
          <div class="price">¥{{ regcourseitem.price }}</div>
        </div>
      </div>
      <!-- 课时表 -->
      <div class="kslist">
        <ul>
          <li v-for="(item, index) in regCourseKsList" :key="index">
            <span class="preview"><img v-lazy="item.image" alt="" /></span>
            <span class="period">
              <span class="bt">{{ item.name }}</span>
              <span class="des">{{ item.content }}</span>
            </span>
            <span class="playbtn" @click="toPlay(item)"
              >播放<span class="tips">{{
                item.isFree === "0" ? "免费" : item.playNum
              }}</span>
              <i class="iconfont icon-insert-right-full"></i>
            </span>
          </li>
        </ul>
      </div>
    </main>
  </div>
</template>

<script>
import api from '@/config/api'
import { sendPost } from '@/utils/http'
export default {
  data () {
    return {
      regCourseKsList: [
      ], // 已报课程课时列表
      id: window.sessionStorage.getItem('regcourseId'),
      regcourseitem: JSON.parse(sessionStorage.getItem('regcourseitem')),
      params: {
        video_skUrl: '',
        video_url: '',
        video_poster: '',
        name: '',
        content: '',
        playNum: '',
        endDate: '',
        teacherImg: '',
        teacherName: ''
      }
    }
  },
  props: ['item'],
  created () {
    this.getCourseVideoByOrder()
  },
  methods: {
    getCourseVideoByOrder () {
      sendPost(api.getCourseVideoByOrder, { courseId: this.id }).then(res => {
        console.log(res.data);
        this.regCourseKsList = res.data.reverse()
      })
    },
    // 已报课程列表播放
    toPlay (info) {
      // 免费课程点击
      if (info.isFree == "0") {
        this.$router.push('videoplay?id=' + info.id + '&freeFlag=' + info.isFree)
      } else {
        // 收费课程点击
        this.$router.push('videoplay?id=' + info.id)
      }


    }
  },
}
</script>

<style lang="less" scoped>
main {
  padding: 2.5rem;
  box-sizing: border-box;
  .h180 {
    height: 11.25rem;
    display: flex;
    .imgshow {
      width: 19.375rem;
      background-color: #d9d9d9;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .info {
      flex: 1;
      padding: 0 2.5rem;
      box-sizing: border-box;
      .title {
        font-size: 1.5rem;
        color: #333;
        font-weight: bold;
      }
      .price {
        height: 3.75rem;
        color: #ff5e4e;
        position: relative;
        line-height: 4.75rem;
        font-size: 2.125rem;
        font-weight: bold;
      }
      .teachername {
        height: 2.5rem;
        display: flex;
        .avatar {
          width: 2.5rem;
          background-color: pink;
          border-radius: 50%;
          overflow: hidden;
          img {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
          }
        }
        .nm {
          font-size: 1rem;
          color: #999;
          text-align: center;
          line-height: 2.5rem;
          margin-left: 0.625rem;
        }
      }
      .time {
        display: flex;
        box-sizing: border-box;
        font-size: 1.125rem;
        line-height: 1.125rem;
        margin: 0.9375rem 0;
        color: #999;
        span {
          box-sizing: border-box;
          text-align: center;
          margin: 0 0.9375rem;
        }
        .iconfont {
          color: #1bc7bd;
          font-size: 1.5rem;
          font-weight: bold;
          vertical-align: middle;
          margin-right: 0.625rem;
        }
      }
    }
  }
  .kslist {
    margin-top: 2.5rem;
    li {
      display: flex;
      position: relative;
      margin-bottom: 1.25rem;
      .preview {
        width: 12.5rem;
        height: 7.25rem;
        background-color: #d9d9d9;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .period {
        width: 31.875rem;
        display: flex;
        flex-direction: column;
        padding: 1.875rem;
        padding-top: 0px;
        box-sizing: border-box;
        .bt {
          font-size: 1.25rem;
          color: #333;
        }
        .des {
          font-size: 1rem;
          color: #999;
          line-height: 2.25rem;
          height: 5rem;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .playbtn {
        cursor: pointer;
        width: 7.5rem;
        height: 3.125rem;
        line-height: 3.125rem;
        background-color: #ff5e4e;
        padding-left: 3.125rem;
        box-sizing: border-box;
        color: #fff;
        border-radius: 0.3125rem;
        font-size: 1.25rem;
        margin-top: 2rem;
        position: relative;
        .tips {
          position: absolute;
          right: -1.75rem;
          top: -0.9375rem;
          width: 2.9375rem;
          height: 1.5rem;
          line-height: 1.5rem;
          text-align: center;
          background-color: #ffb62e;
          color: #fff;
          font-size: 0.875rem;
          border-radius: 0.75rem 0.75rem 0.75rem 0px;
        }
      }
      .disabledplaybtn {
        cursor: pointer;
        width: 7.5rem;
        height: 3.125rem;
        line-height: 3.125rem;
        background-color: #cccccc;
        padding-left: 3.125rem;
        box-sizing: border-box;
        color: #fff;
        border-radius: 0.3125rem;
        font-size: 1.25rem;
        margin-top: 2rem;
        position: relative;
        .tips {
          position: absolute;
          right: -1.75rem;
          top: -0.9375rem;
          width: 2.9375rem;
          height: 1.5rem;
          line-height: 1.5rem;
          text-align: center;
          background-color: #ffb62e;
          color: #fff;
          font-size: 0.875rem;
          border-radius: 0.75rem 0.75rem 0.75rem 0px;
        }
      }
      .iconfont {
        position: absolute;
        right: 4.575rem;
        bottom: 0;
        z-index: 999;
        color: #fff;
        font-size: 20px;
      }
    }
  }
}
</style>
